<!--
 * @Author: wangming
 * @Date: 2022-03-04 17:17:00
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-04 17:17:00
 * @FilePath: /hanma-application-designer-fed/src/pages/taskCenter/index/mqtt/index.vue
 * @Description: 
-->
<route>
{
  "meta":{
    "title":"MQTT",
    "showMenu":true,
    "localism": "sys.middleware_mqtt"
  }
}
</route>
<template>
  <div>
    <el-tabs tabPosition="left" v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane
        key="mqttList"
        name="mqttList"
        :label="$t('sys.middleware_mqtt_list')"
      >
        <MqttList v-if="activeTab == 'mqttList'" />
      </el-tab-pane>
      <el-tab-pane
        key="mqttSubscription"
        name="mqttSubscription"
        :label="$t('sys.middleware_mqtt_subscription')"
      >
        <MqttSubscription v-if="activeTab == 'mqttSubscription'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MqttList from "./__components__/MqttList.vue"
import MqttSubscription from "./__components__/MqttSubscription.vue"
export default {
  components: {
    MqttList,
    MqttSubscription,
  },
  data() {
    return {
      activeTab: "",
    }
  },
  created() {
    const { type } = this.$route.query
    this.activeTab = type ? type : "mqttList"
  },
  mounted() {},
  methods: {
    handleTabClick(tab) {
      this.$router.replace({
        path: this.$route.path,
        query: {
          type: tab.name,
        },
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
